﻿@using Apps.Web.Core;
@using Apps.Locale;
@using Apps.Models.Enum;
@{
    ViewBag.Title = "Doc";
    Layout = "~/Views/Shared/_Index_Layout.cshtml";
}
<script src="@Url.Content("~/Scripts/echarts.min.js")"></script>
<script src="@Url.Content("~/Scripts/echarts.theme.shine.js")"></script>

<link href="~/Scripts/fullcalendar/fullcalendar.css" rel="stylesheet" />
<script src="~/Scripts/fullcalendar/moment.min.js"></script>
<script src="~/Scripts/fullcalendar/fullcalendar.min.js"></script>
<script src="~/Scripts/fullcalendar/zh-cn.js"></script>

<style>
 .cc .panel-header{padding:0;border:0}
.cc .panel-title{padding-left:5px;background:#fff;line-height:28px;border:0;border-bottom:1px #d3d3d3 solid;color:#666}
.cc .alphac{filter:Alpha(Opacity=70);-moz-opacity:.7;opacity:.7}
.cc{position:relative;height:200px;width:100px}
.groupSave{display:none}
.cc .panel-tool{display:none}
.checkBoxPart{width:150px;height:26px;line-height:40px;padding-left:20px}
.checkBoxPart input,.checkBoxPart lable{vertical-align:middle;vertical-align:middle;margin:0;margin-right:4px}
#dataPart,#myJobPart,#notePart,#noticePart,#shortcutPart{overflow:hidden;position:absolute}
.ddcontent{min-height:50px;padding:5px;background:#fff}
.btn.tile-button{display:block;text-align:center}
.bg-gray-alt.btn.tile-button:hover,.bg-gray.btn.tile-button:hover,.bg-white.btn.tile-button:hover .tile-header{color:#000}
.tile-header{padding:10px;font-size:14px;text-transform:uppercase;background:rgba(255,255,255,.2)}
.tile-content-wrapper{padding:10px 10px 17px;position:relative;overflow:hidden}
.tile-content{font-size:35px;text-align:right}
.tile-content span{font-size:25px;-moz-opacity:.7;filter:alpha(opacity:70);opacity:.7}
.tile-content-wrapper small{-moz-opacity:.7;filter:alpha(opacity:70);opacity:.7;text-align:right;font-size:14px;display:block}
.tile-content-wrapper>.glyph-icon{position:absolute;font-size:65px;height:70px;line-height:70px;top:50%;margin-top:-40px;-moz-opacity:.3;filter:alpha(opacity:30);opacity:.3;left:15px}
.tile-footer{padding:5px 10px;background:rgba(0,0,0,.1);text-align:left}
.tile-footer .glyph-icon{float:right}
.tile-button-alt .tile-header{padding:5px 10px;text-align:left}
.tile-button-alt .tile-content-wrapper>.glyph-icon{font-size:35px;width:100%;margin-top:-36px}
.bg-blue,.hover-blue:hover{color:#fff;background:#5bccf6}
.bg-red,.hover-red:hover{color:#fff;background:#ff5757}
.bg-gray,.hover-gray:hover{background:#efefef}
.bg-gray-alt,.hover-gray-alt{background:#dedede}
.btn.hover-gray-alt:hover,.btn.hover-gray:hover{color:#000}
.bg-black,.hover-black:hover{color:#ccc;background:#212121}
.bg-green,.hover-green:hover{color:#fff;background:#9cd159}
.bg-orange,.btn.bg-white.hover-orange:hover,.hover-orange:hover{color:#fff;background:#fa7753}
.bg-white{background:#fff}
.btn.bg-white:hover{color:#666}
.hover-white:hover{background:#fafafa}
.btn.hover-white:hover{color:#666}
.bg-yellow,.hover-yellow:hover{color:#fff;background:#fc0}
.bg-purple,.hover-purple:hover{color:#fff;background:#984dff}
.bg-blue-alt,.hover-blue-alt:hover{color:#fff;background:#65a6ff}
.bg-azure,.hover-azure:hover{color:#fff;background:#41e5c0}
    .fc-list-table td {padding:0px 14px
    }
</style>
<script type="text/javascript">
    //修改，筛选，保存
    $(function () {
        $(".groupSave").hide();
        var editFlag = false;
        $(".cc").height($(window).height() - 41);
        $(window).resize(function () { $(".cc").height($(window).height() - 41); });
        $('#shortcutPart,#noticePart,#myJobPart,#dataPart,#notePart,#dd8,#dd9').draggable({ edge: 5 }).resizable();
        //选中的将变成最顶层
        $(".cc div").mousedown(function () {
            $(".cc div").css("z-index", "0").removeClass("alphac");
            $(this).css("z-index", "1").addClass("alphac");
        }).mouseup(function () {
            $(".cc div").removeClass("alphac");
        });

        $(".cc div").mousedown(function () {
            $(".cc div").css("z-index", "0").removeClass("alphac");
            $(this).css("z-index", "1").addClass("alphac");
        }).mouseup(function () {
            $(".cc div").removeClass("alphac");
        });
        $('#shortcutPart,#noticePart,#myJobPart,#dataPart,#notePart').draggable('disable').resizable('disable');
        $("#mydialog input[type='checkbox']").each(function (i) {
            if ($(this).prop("checked")) {

            }
        });
        //初始化筛选
        for (var i = 1; i < 10; i++) {
            if ($("#dd" + i).is(":hidden")) {
                $("#cdd" + i).removeAttr("checked");
            }
            else {
                $("#cdd" + i).attr("checked", "true");
            }
        }
        $("#Edit").click(function () {

            $.messageBox5s(Lang.Tip, '您现在可以进行部件删减，以及部件大小的调整！');
            $('#shortcutPart,#noticePart,#myJobPart,#dataPart,#notePart,#dd8,#dd9').draggable('enable').resizable('enable').css("border", "1px #ff6600 dashed");
            $(".panel-tool").show();
            $(".groupSave").show();
            $(".groupEdit").hide();
            editFlag = true;
        });
        //单项去除
        $(".cc .panel-tool-close").click(function () {
            $(this).parent().parent().parent().hide();

            $.messageBox5s(Lang.Tip, '您可以［部件筛选］中让他重新显示！');
        });
        $("#Save").click(function () {

            $("#notePartContent").html("<div style=\"min-width:400px; line-height:40px;\" id=\"calendar\"></div>");

            if (editFlag) {
                editFlag = false;
                //取出数据，保存html
                for (var i = 1; i < 10; i++) {
                    $("#content" + i).html("");
                }
                $('#shortcutPart,#noticePart,#myJobPart,#dataPart,#notePart').draggable('disable').resizable('disable').css("border", "");
                $(".cc .panel-tool").hide();

                //此处进行保存数据
                //////////////////////////////////////////////////////////////////////////////////////
                $("#JsSet").html("");
                $.post("../Home/SaveHtml", { html: $(".cc").html() }, function (data) { }, "json");
                /////////////////////////////////////////////////////////////////////////////////////
                //重新加载数据，重新绑定
                $(".cc div").unbind().mousedown(function () {
                    $(".cc div").css("z-index", "0").removeClass("alphac");
                    $(this).css("z-index", "1").addClass("alphac");
                }).mouseup(function () {
                    $(".cc div").removeClass("alphac");
                });
                LoadData();

                $.messageBox5s(Lang.Tip, '保存成功！');



                $(".groupSave").hide();
                $(".groupEdit").show();
            } else {

                $.messageBox5s(Lang.Tip, '没有什么需要保存的！');
            }
        });
        $("#Choice").click(function () {
            $("#modalwindow").window({ title: '筛选', width: 250, height: 320, iconCls: 'fa fa-filter', resizable: false }).window('open');
        });
        $("#ChoiceSave").click(function () {
            $("#modalwindow").window("close");

        });
        $(".checkBoxPart input").click(function () {
            if ($(this).prop("checked")) {
                $("#" + $(this).val()).show();
            }
            else {
                $("#" + $(this).val()).hide();
            }
        });
        $("#Reset").click(function () {
            $.messager.confirm('复位提醒', '您确定要重置部件的位置和个数吗?', function (r) {
                if (r) {
                    $.post("../Home/SaveHtml", { html: "" }, function (data) {
                        location.reload();
                    }, "json");

                    LoadData();
                }
            });
        });
        LoadData();
    });
    //加载
    function LoadData() {
        //初始化筛选
        $("#noticePartContent").html("<div class=\"panel-loading\">Loading...</div>");
        $("#dataPartContent").html("<div class=\"panel-loading\">Loading...</div>");
        //$("#notePartContent").html("<div class=\"panel-loading\">Loading...</div>");
        //如果部件，没有被去掉，那么就加载数据
        if (!$("#shortcutPart").is(":hidden")) {
            Load_ShortcutPart();
        }
        if (!$("#noticePart").is(":hidden")) {
            Load_NoticePart();
        }
        if (!$("#myJobPart").is(":hidden")) {
            Load_MyJobPart();
        }
        if (!$("#dataPart").is(":hidden")) {
            Load_DataPart();
        }
        if (!$("#notePart").is(":hidden")) { //Load_7();
            Load_NotePart();
        }
    }

    function Load_ShortcutPart() {
        $.post("../Home/GetPartDataByShortcut", function (data) {
            //这里填充快捷部件的数据
        }, "json");
    }
    function Load_NoticePart() { $.post("../Home/GetPartDataByNotice", function (data) { $("#noticePartContent").html(data); }, "json"); }
    function Load_MyJobPart() {
        $.post("../Home/GetPartDataByMyJob", function (data) {
            var str = "";
            str = str + "<table style=\"width:100%\">";
            for (var i = 0; i < data.rows.length;i++)
            {
                str = str + "<tr style='height:33px;line-height:33px; padding:5px;'><td>"+getFlowLevel(data.rows[i].FormLevel)+"&nbsp;【"+data.rows[i].UserName+"-&nbsp;<a  href='javascript:ManageFlow(\"" + data.rows[i].Title + "\",\"" + data.rows[i].FormId + "\",\"" + data.rows[i].Id + "\");' class=\"color-black\">" + data.rows[i].Title + "】【&nbsp;处理状态："+getCurrentState(data.rows[i].CurrentState)+"】</a></td><td class=\"color-black\" style=\"width:75px\">[" + SubStrYMD(data.rows[i].CreateTime) + "]</td></tr>";
            }
            str = str + "</table>";
            $("#myJobPartContent").html(str);
        }, "json");

    }
    function getFlowLevel(value) {
        if(value==@((int)FlowFormLevelEnum.Ordinary)){return "<span class='label label-success'>普通</span>";}
        if(value==@((int)FlowFormLevelEnum.Major)){return "<span class='label label-info'>重要</span>";}
        if(value==@((int)FlowFormLevelEnum.Urgent)){return "<span class='label label-error'>紧急</span>";}
                        return "";
    }
    function getCurrentState(value) {
        var _pass = "<span class='label label-success'>已结束</span>";
        var _progress = "<span class='label label-info'>进行中</span>";
        var _reject = "<span class='label label-error'>已驳回</span>";
        var _close = "<span class='label label-error'>已超时</span>";
        if(value==@((int)FlowStateEnum.Pass)){ return _pass;}
        if(value==@((int)FlowStateEnum.Progress)){ return _progress;}
        if(value==@((int)FlowStateEnum.Reject)){ return _reject;}
        return _close;
    }
    function Load_DataPart() {
        //$.post("../Home/GetPartDataByData", function (data) {
        //    $("#dataPartContent").html(data);
        //}, "json");


       var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],

                    label: {
                        normal: {
                            position: 'inner'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        { value: 435, name: '直达' },
                        { value: 679, name: '营销', selected: true },
                        { value: 1548, name: '引擎' }
                    ]
                },
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '55%'],

                    data: [
                        { value: 335, name: '直达' },
                        { value: 310, name: '邮件营销' },
                        { value: 234, name: '联盟广告' },
                        { value: 135, name: '视频广告' },
                        { value: 1048, name: '百度' },
                        { value: 251, name: '谷歌' },
                        { value: 147, name: '必应' },
                        { value: 102, name: '其他' }
                    ]
                }
            ]
       };

       $("#dataPartContent").attr("style", "border:0px;width:" + (SetGridWidthSub(10) / 2 - 40) + "px;height:320px;");
       var myChart = echarts.init(document.getElementById('dataPartContent'), "shine");

        myChart.setOption(option);
    }
    function Load_NotePart() {
        //$.post("../Home/GetPartDataByNote", function (data) { $("#notePartContent").html(data); }, "json");
        //setProgressbarColor( $('#pb1').progressbar('getValue'),"pb1");
        //setProgressbarColor( $('#pb2').progressbar('getValue'),"pb2");
        //setProgressbarColor( $('#pb3').progressbar('getValue'),"pb3");
        //setProgressbarColor( $('#pb4').progressbar('getValue'),"pb4");
    
             $('#calendar').fullCalendar({
                 weekNumbers: true,
                 weekNumbersWithinDays: true,
                 weekNumberCalculation: 'ISO',
                 editable: true,
                 navLinks: true, // can click day/week names to navigate views
                 defaultView:'listWeek',
                 contentHeight:$("canvas").height()-70,
                 selectable: true,
                 selectHelper: true,//在agenda视图下选择时会带上对应的时间
                 dragOpacity: 0.5, //Event被拖动时的不透明度
                 droppable: true, // this allows things to be dropped onto the calendar
                 drop: function () {
                     // is the "remove after drop" checkbox checked?

                 },
                 eventLimit: true, // allow "more" link when too many events
                 events: {
                     url: '/SysCalendarPlan/GetList',
                     error: function () {
                         $.messageBox5s(Lang.Tip, "请求错误");
                     }
                 },//点击
                 windowResize: function(view) {
             
                 }
             });
         

    }

    function setProgressbarColor(value,id)
    {
        if (value < 100){
            value += Math.floor(Math.random() * 2);
            //$('#pb2').progressbar('setValue', value);
            if(value<=30){
                $("#"+id+" .progressbar-value .progressbar-text").css("background-color","#DF4134");
            }else if (value<=70){
                $("#"+id+" .progressbar-value .progressbar-text").css("background-color","#EABA0A");
            }else if (value>70){
                $("#"+id+" .progressbar-value .progressbar-text").css("background-color","#53CA22");
            }
            setTimeout(arguments.callee, 200);
        }
    }


    //动态设置宽度
    function promptValue(id) {
        $.messager.prompt('设置部件宽度', '请输入宽度，格式：<font color="red">50%</font>或<font color="red">500px</font>', function (r) {
            if (r) {
                $("#" + id).width(r);
            }
        });
    }


    function SetWebpartLayout() {

        var winWidth = $(window).width();
        var winHeight = $(window).height();
        if (winHeight < 800)
        {
            winWidth = 1280;
            winHeight = 800;
        }
        var _windowWidth = winWidth - 10;
        var _windowHeight = winHeight-12;
        $("#shortcutPart").width(_windowWidth - 50).height(140);
        var ddw = $("#shortcutPart").width();
        var ddh = $("#shortcutPart").height()
        $("#noticePart,#myJobPart,#dataPart,#notePart").width(_windowWidth / 2 - 40);

        $("#shortcutPart,#noticePart,#dataPart").css("left", 0);
        $("#myJobPart,#notePart").css("left", ddw / 2 + 7);
        $("#shortcutPart").css("top", 0);
        $("#noticePart,#myJobPart").css("top", ddh + 7);
        $("#notePart,#dataPart").css("top", _windowHeight-400);

    }
    //打开文章
    function ShowInfo(name, url) {
        $("#modalwindowContent").html("<iframe width='100%' height='100%' scrolling='auto' frameborder='0''  src='/MIS/Article/Details?id="+url+"'></iframe>");
        $("#modalwindowContent").window({ title: name, width: 800, height: 600, iconCls: 'fa fa-list' }).window('open');
    }

    //打开工作流
    function ManageFlow(winTitle, formId, id)
    {
        var url = "/Flow/Examine/Edit?formId=" + formId + "&id=" + id + "&Ieguid=" + GetGuid() + "";
        $("#modalwindowContent").html("<iframe width='100%' height='100%' scrolling='auto' frameborder='0'' src='"+url+"'></iframe>");
        $("#modalwindowContent").window({ title: winTitle, width:  SetGridWidthSub(100), height: SetGridHeightSub(100), iconCls: 'fa fa-file-text-o' }).window('open');
    }

</script>
<div id="modalwindowContent" class="easyui-window" data-options="modal:true,closed:true,minimizable:false,shadow:false"></div>
<div id="modalwindow" class="easyui-window" style="width:250px; height:320px;" data-options="modal:true,closed:true,minimizable:false,shadow:false">
    <div class="mvctool bgb">
        @Html.ToolButton("ChoiceSave", "fa fa-cog", Resource.Save, false)
    </div>
    <div class="checkBoxPart">
        <input id="cshortcutPart" type="checkbox" value="shortcutPart" /><lable>待办事项</lable>
    </div>
    <div class="checkBoxPart">
        <input id="cnoticePart" type="checkbox" value="noticePart" />我的申请
    </div>
    <div class="checkBoxPart">
        <input id="cmyJobPart" type="checkbox" value="myJobPart" />我的批阅
    </div>
    <div class="checkBoxPart">
        <input id="cdataPart" type="checkbox" value="dataPart" />数据统计
    </div>
    <div class="checkBoxPart">
        <input id="cnotePart" type="checkbox" value="notePart" />留言板
    </div>
</div>
<div class="mvctool" style="float:right; margin-right:40px;">
    <div class="groupEdit">
        @Html.ToolButton("Edit", "fa fa-cog", "", false)
    </div>
    <div class="groupSave">
        @Html.ToolButton("Save", "fa fa-save", "完成", true)
        @Html.ToolButton("Choice", "fa fa-filter", "部件筛选", true)
        @Html.ToolButton("Reset", "fa fa-refresh", "部件复位", false)
    </div>
</div>
<div style="padding:0px 23px;clear:both">
    <div class="cc">
        @if (string.IsNullOrEmpty(ViewBag.Value))
        {

            <div id="shortcutPart" class="easyui-draggable panel" data-options="handle:'#title1'">

                <div id="shortcutPartContent" class="panel-body ddcontent" style="border: 0;width:100%">
                    <table style="width:100%;">
                        <tr>
                            <td style="width:25%">
                                <div style="width:95%;">
                                    <a href="javascript:alert('未设置跳转链接');" class="tile-button btn bg-green" title="">
                                        <div class="tile-content-wrapper">
                                            <i class="glyph-icon fa fa-bar-chart fa-5x"></i>
                                            <div class="tile-content">
                                                <span>￥</span>
                                                9056.76
                                            </div>
                                            <small>
                                                <i class="glyph-icon"></i>
                                                第三季度个人销售额
                                            </small>
                                        </div>
                                        <div class="tile-footer">
                                            查看详情
                                            <i class="glyph-icon fa fa-arrow-right"></i>
                                        </div>
                                    </a>
                                </div>
                            </td>
                            <td style="width:25%">
                                <div style="width:95%;">
                                    <a href="javascript:alert('未设置跳转链接');" class="tile-button btn bg-blue-alt" title="">
                                        <div class="tile-content-wrapper">
                                            <i class="glyph-icon fa fa-history fa-5x"></i>
                                            <div class="tile-content">
                                                <span>+</span>2.6%

                                            </div>
                                            <small>
                                                <i class="glyph-icon fa fa-line-chart"></i>
                                                第三季度同比增长
                                            </small>
                                        </div>
                                        <div class="tile-footer">
                                            查看详情
                                            <i class="glyph-icon fa fa-arrow-right"></i>
                                        </div>
                                    </a>
                                </div>
                            </td>
                            <td style="width:25%">
                                <div style="width:95%;">
                                    <a href="javascript:alert('未设置跳转链接');" class="tile-button btn bg-azure" title="">
                                        <div class="tile-content-wrapper">
                                            <i class="glyph-icon fa fa-users"></i>
                                            <div class="tile-content">

                                                3560<span>人</span>
                                            </div>
                                            <small>
                                                <i class="glyph-icon fa fa-crosshairs"></i>
                                                累积客户数量
                                            </small>
                                        </div>
                                        <div class="tile-footer">
                                            查看详情
                                            <i class="glyph-icon fa fa-arrow-right"></i>
                                        </div>
                                    </a>
                                </div>
                            </td>
                            <td style="width:25%">
                                <div style="width:95%;">
                                    <a href="javascript:alert('未设置跳转链接');" class="tile-button btn bg-red" title="">
                                        <div class="tile-content-wrapper">
                                            <i class="glyph-icon fa fa-tasks"></i>
                                            <div class="tile-content">

                                                78<span>（4568分）</span>
                                            </div>
                                            <small>
                                                <i class="glyph-icon fa fa-pagelines"></i>
                                                个人积分排名
                                            </small>
                                        </div>
                                        <div class="tile-footer">
                                            查看详情
                                            <i class="glyph-icon fa fa-arrow-right"></i>
                                        </div>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div id="noticePart" class="easyui-draggable" data-options="handle:'#noticeTitle'">
                <div id="noticeTitle" class="panel-header" style="border: 0">
                    <div class="panel-title" style="">
                        <span class="fa fa-bullhorn"></span>&nbsp;&nbsp;最新公告(Top 6)
                    </div>
                    <div class="panel-tool">
                        <a href="javascript:promptValue('noticePart')" class="panel-tool-max"></a><a href="javascript:void(0)"
                                                                                                     class="panel-tool-close"></a>
                    </div>
                </div>
                <div id="noticePartContent" class="panel-body ddcontent" style="border: 0">
                    <div class="panel-loading">
                        Loading...
                    </div>
                </div>
            </div>

            <div id="myJobPart" class="easyui-draggable" data-options="handle:'#title5'">
                <div id="title5" class="panel-header" style="border: 0">
                    <div class="panel-title" style="">
                        <span class="fa fa-tasks"></span>&nbsp;&nbsp;我的批阅(Top 6)
                    </div>
                    <div class="panel-tool">
                        <a href="javascript:promptValue('myJobPart')" class="panel-tool-max"></a><a href="javascript:void(0)"
                                                                                                    class="panel-tool-close"></a>
                    </div>
                </div>
                <div id="myJobPartContent" class="panel-body ddcontent" style="border: 0">
                    <table id="List"></table>
                </div>
            </div>

            <div id="dataPart" class="easyui-draggable" data-options="handle:'#title6'">
                <div id="title6" class="panel-header" style="border: 0">
                    <div class="panel-title" style="">
                        <span class="fa fa-pie-chart"></span>&nbsp;&nbsp;数据统计
                    </div>
                    <div class="panel-tool">
                        <a href="javascript:promptValue('dataPart')" class="panel-tool-max"></a><a href="javascript:void(0)"
                                                                                                   class="panel-tool-close"></a>
                    </div>
                </div>
                <div id="dataPartContent" class="panel-body ddcontent" style="border: 0; background:#fff">
                    <div class="panel-loading">
                        Loading...
                    </div>
                </div>
            </div>

            <div id="notePart" class="easyui-draggable" data-options="handle:'#title7'">
                <div id="title7" class="panel-header" style="border: 0">
                    <div class="panel-title" style="">
                        <span class="fa fa-tags"></span>&nbsp;&nbsp;我的日程
                    </div>
                    <div class="panel-tool">
                        <a href="javascript:promptValue('notePart')" class="panel-tool-max"></a><a href="javascript:void(0)"
                                                                                                   class="panel-tool-close"></a>
                    </div>
                </div>
                <div id="notePartContent" class="panel-body ddcontent" style="border: 0">

                    <div style="min-width:400px; line-height:40px;" id="calendar"></div>

                  <!--  <div style="min-width:400px; line-height:40px;">
                        <p>剩余百分比</p>
                        <div id="pb1" class="easyui-progressbar" data-options="value:80" style="width:100%;"></div>
                        <p>销售进度</p>
                        <div id="pb2" class="easyui-progressbar" data-options="value:33" style="width:100%;"></div>
                        <p>处理进度</p>
                        <div id="pb3" class="easyui-progressbar" data-options="value:58" style="width:100%;"></div>
                        <p>回款进度</p>
                        <div id="pb4" class="easyui-progressbar" data-options="value:22" style="width:100%;"></div>
                    </div>-->
                </div>
            </div>
            <script id="JsSet">
                $(function () { SetWebpartLayout(); });
                $(window).resize(function () {
                    SetWebpartLayout();
                    $('#List').datagrid('resize', {
              
                    }).datagrid('resize', {
                        width:   $(window).width/2-40

                    });
                });
            </script>
        }
        else
        {
            @Html.Raw(ViewBag.Value)
        }
    </div>
</div>
